---
title: SVG Ripple Effect
date: 2025-01-27
description: Animated SVG ripple effect component with customizable transitions and fade overlays.
author: karthikmudunuri
published: true
---

<ComponentPreview name="svg-ripple-effect-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @eldoraui/svg-ripple-effect
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

`components/eldoraui/svg-ripple-effect.tsx`

<ComponentSource name="svg-ripple-effect" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### With Hover Animation

<ComponentPreview name="svg-ripple-effect-demo-2" />

## Usage

```tsx showLineNumbers
import { SvgRippleEffect } from "@/components/eldoraui/svg-ripple-effect"
```

```tsx showLineNumbers
<SvgRippleEffect
  transition={{
    duration: 0.75,
    repeat: Infinity,
    repeatDelay: 1.25,
  }}
  fade={["top", "bottom"]}
/>
```

## Props

| Prop         | Type                    | Default                                                   | Description                                                               |
| ------------ | ----------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------- |
| `transition` | `object`                | `{ duration: 0.75, repeat: Infinity, repeatDelay: 1.25 }` | Animation transition configuration with duration, repeat count, and delay |
| `fade`       | `('top' \| 'bottom')[]` | `[]`                                                      | Array of fade directions to apply gradient overlays                       |
